<template>
  <div class="container">
    <div class="app-container">
      <el-card>
        <div style="height: 40px">
          <el-button
            icon="el-icon-edit"
            type="success"
            style="margin-left: 10px"
            class="filter-item fr"
            size="mini"
            @click="$router.push('/questions/new')"
          >新增试题</el-button>
        </div>

        <span style="font-weight: 600; margin-left: 32px;">学科</span>
        <el-select
          v-model="q.subjectID"
          placeholder="请选择"
          class="maright"
          @click.native="getSubjectList"
          @change="getCatalogue"
        >
          <el-option
            v-for="item in SubjectList"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
        <span style="font-weight: 900">二级目录</span>
        <el-select
          v-model="q.catalogID"
          placeholder="请选择"
          class="maright"
        >
          <el-option
            v-for="item in catalogueList"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
        <span style="font-weight: 900">标签</span>
        <el-select
          v-model="q.tags"
          placeholder="请选择"
          class="maright"
        >
          <el-option
            v-for="item in tagsList"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
        <span style="font-weight: 900">关键字</span>
        <el-input v-model="q.keyword" style="width: 180px" />

        <div style="margin-top: 20px">
          <span style="font-weight: 900">试题类型</span>
          <el-select
            v-model="q.questionType"
            placeholder="请选择"
            class="maright"
          >
            <el-option
              v-for="item in questionTypeList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />

          </el-select>
          <span style="font-weight: 900; margin-left: 31px">难度</span>
          <el-select
            v-model="q.difficulty"
            placeholder="请选择"
            class="maright"
          >
            <el-option
              v-for="item in difficultyList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />

          </el-select>
          <span style="font-weight: 900">方向</span>
          <el-select
            v-model="q.direction"
            placeholder="请选择"
            class="maright"
          >
            <el-option
              v-for="(item,index) in directionList"
              :key="index"
              :value="item"
              :label="item"
            />

          </el-select>
          <span style="font-weight: 900">录入人</span>
          <el-select
            v-model="q.creatorID"
            placeholder="请选择"
            style="width: 180px"
            @click.native="getUserList"
          >
            <el-option
              v-for="item in usernameList"
              :key="item.id"
              :value="item.id"
              :label="item.username"
            />
          </el-select>
        </div>

        <div style="margin-top: 20px; margin-bottom: 20px">
          <span style="font-weight: 900">题目备注</span>
          <el-input v-model="q.remarks" style="width: 220px" />

          <span style="font-weight: 900; margin-left: 10px">企业简称</span>
          <el-input v-model="q.shortName" style="width: 220px" />

          <span style="font-weight: 900; margin-left: 12px">城市</span>
          <el-select
            v-model="q.province"
            placeholder="请选择"
            class="maright"
            style="width: 100px"
            @change="getCitysList"
          >
            <el-option
              v-for="(item,index) in provincesList"
              :key="index"
              :value="item"
              :label="item"
            />
          </el-select>
          <el-select
            v-model="q.city"
            placeholder="请选择"
            class="maright"
            style="width: 100px"
          >
            <el-option
              v-for="item in citys"
              :key="item"
              :value="item"
              :label="item"
            />
          </el-select>
          <div class="fr" style="margin-right: 10px">
            <el-button @click="clear">清除</el-button>
            <el-button type="primary" @click="submitCheck">搜索</el-button>
          </div>
        </div>
        <!--tabs标签页 -->
        <el-tabs v-model="q.chkState" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name="all" />
          <el-tab-pane label="待审核" name="0" />
          <el-tab-pane label="已审核" name="1" />
          <el-tab-pane label="已拒绝" name="2" />
        </el-tabs>
        <el-alert
          :title="alert"
          type="info"
          show-icon
          :closable="false"
          style="margin-bottom: 20px"
        />
        <!-- 表格 -->
        <el-table
          :data="items"
          :header-cell-style="{
            'background-color': 'rgba(0,0,0,0.1)',
            'border-bottom': '1px solid rgba(0,0,0,0.2)',
          }"
        >
          <el-table-column prop="number" label="试题编号" />
          <el-table-column prop="subject" label="学科" />
          <el-table-column prop="catalog" label="目录" />
          <el-table-column label="题型">
            <template #default="{ row }">
              {{
                questionTypeList.find(
                  (item) => item.value === +row.questionType
                ).label
              }}
            </template>
          </el-table-column>
          <el-table-column label="题干" width="180">
            <template #default="{ row }">
              <div v-html="row.question" />
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间">
            <template #default="{ row }">
              {{ row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column label="难度">
            <template #default="{ row }">
              {{
                difficultyList.filter(
                  (item) => item.value === +row.difficulty
                )[0].label
              }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" />
          <el-table-column label="审核状态">
            <template #default="{row}">
              <!-- {{ row.chkState }} -->

              {{ chkTypeList.find(item => item.value === +row.chkState).label }}
            </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" />
          <el-table-column prop="chkUser" label="审核人" />
          <el-table-column label="发布状态">
            <template #default="{row}">
              {{ publishTypeList.find(item=>item.value===+row.publishState).label }}
            </template>
          </el-table-column>

          <el-table-column label="操作" width="180" fixed="right">
            <template #default="{row}">
              <el-row type="flex" class="row-bg">
                <el-col>
                  <el-link
                    type="primary"
                    :underline="false"
                    @click="handleQuestionPreview(row)"
                  >预览</el-link>
                </el-col>
                <el-col>
                  <el-link
                    :type="row.chkState===0 ? 'primary' : 'info'"
                    :underline="false"
                    :disabled="row.chkState===0 ? false : true"
                    @click="clickCheck(row)"
                  >
                    审核</el-link>
                </el-col>
                <el-col>
                  <el-link
                    :type="row.publishState===1 ? 'info' : 'primary'"
                    :underline="false"
                    :disabled="row.publishState===1 ? true : false"
                    @click="$router.push(`/questions/new?id=${row.id}`)"
                  >
                    修改</el-link>
                </el-col>
                <el-col>
                  <el-link
                    type="primary"
                    :underline="false"
                    @click="handleQuestionsState(row)"
                  >
                    {{ row.publishState !==1 ? '上架' : '下架' }}</el-link>
                </el-col>
                <el-col>
                  <el-link
                    :type="row.publishState===1 ? 'info' : 'primary'"
                    :underline="false"
                    :disabled="row.publishState===1 ? true : false"
                    @click="delQuestion(row)"
                  >删除</el-link>
                </el-col>

              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="fr" style="margin-top: 10px">
          <el-pagination
            :current-page="q.page"
            :page-sizes="[1, 2, 3, 4, 5, 6, 7]"
            :page-size="q.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
        <!-- 题目弹出框 -->
        <QuestionsPreview :is-show-dialog.sync="isShowDialog" :row-question="rowQuestion" />
        <!-- 审核弹出框 -->
        <el-dialog title="题目审核" :visible="showCheckDialog" width="30%" @close="showCheckDialog=false">
          <el-radio v-model="radio" :label="1">通过</el-radio>
          <el-radio v-model="radio" :label="2" style="margin-bottom:20px">拒绝</el-radio>
          <el-input
            v-model="chkRemarks"
            type="textarea"
            :rows="2"
            placeholder="请输入审核意见"
          />
          <template #footer>
            <el-button @click="showCheckDialog=false">取消</el-button>
            <el-button type="primary" size="small" @click="handleClickCheck">确认</el-button>
          </template>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>

// | page         | 否   | 1                      | 当前页数       |
// | ------------ | ---- | ---------------------- | -------------- |
// | pagesize     | 否   | 10                     | 页尺寸         |
// | subjectID    | 否   |                        | 学科           |
// | difficulty   | 否   |                        | 难度           |
// | questionType | 否   |                        | 试题类型       |
// | tags         | 否   |                        | 标签名称       |
// | province     | 否   |                        | 企业所在地省份 |
// | city         | 否   |                        | 企业所在城市   |
// | keyword      | 否   |                        | 关键字         |
// | remarks      | 否   |                        | 题目备注       |
// | shortName    | 否   |                        | 企业简称       |
// | direction    | 否   |                        | 方向           |
// | creatorID    | 否   |                        | 录入人         |
// | catalogID    | 否   |                        | 目录           |
// | chkState     | 否   | 0 待审核 1 通过 2 拒绝 | 审核状态       |
import { choice, remove, choiceCheck, choicePublish } from '@/api/hmmm/questions.js'
import { difficulty, questionType, direction, chkType, publishType } from '@/api/hmmm/constants.js'
import { simple } from '@/api/hmmm/subjects.js'
import { simple as catalogue } from '@/api/hmmm/directorys.js'
import { simple as getTags } from '@/api/hmmm/tags.js'
import { simple as getuser } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import QuestionsPreview from '../components/questions-preview.vue'
export default {
  name: 'Questions',
  components: { QuestionsPreview },

  data() {
    return {
      q: {
        page: 1,
        pagesize: 5,
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        chkState: 'all'
      },
      counts: null, // 总数
      pages: null, // 总页数
      items: [], // 表格数据
      difficultyList: difficulty, // 难度对照表
      questionTypeList: questionType, // 题型对照表
      directionList: direction, // 方向对照表
      chkTypeList: chkType, // 审核对照表
      publishTypeList: publishType, // 发布状态对照表
      SubjectList: [], // 学科列表
      catalogueList: [], // 目录列表
      tagsList: [], // 标签列表
      usernameList: [], // 录入人列表
      provincesList: provinces(), // 城市列表
      citys: [], // 城市下地区列表
      isShowDialog: false, // 题目弹出框
      rowQuestion: {}, // 题目预览内容
      activeName: 'first', // tabs栏高亮
      showCheckDialog: false, // 审核弹出框
      radio: 1, // 审核状态
      chkRemarks: '', // 审核意见
      rowCheck: {}
    }
  },
  computed: {
    alert() {
      return '数据一共' + this.counts + '条'
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取所有表格数据
    async getList() {
      const p = { ...this.q }
      if (p.chkState === 'all') {
        p.chkState = null
        // console.log(this.q.chkState)
      }
      const { data: { items, counts, pages }} = await choice(p)
      console.log(items)
      this.counts = counts
      this.pages = pages
      this.items = items
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.q.page = 1
      this.q.pagesize = val
      this.getList()
    },
    // 当前页该变
    handleCurrentChange(val) {
      this.q.page = val
      this.getList()
    },
    // 获取学科列表
    async getSubjectList() {
      const { data } = await simple()
      // console.log(data)
      this.SubjectList = data
    },
    async getCatalogue(value) {
      // console.log(value)
      if (value) {
        // 获取目录列表
        const { data } = await catalogue({ subjectID: value })
        // console.log(data)
        this.catalogueList = data
        // 获取标签列表
        const { data: a } = await getTags({ subjectID: value })
        this.tagsList = a
      } else {
        this.catalogueList = []
        this.tagsList = []
      }
    },
    // 获取用户
    async getUserList() {
      // console.log(11)
      const { data } = await getuser()
      // console.log(res)
      this.usernameList = data
    },
    // 城市值发生变化
    getCitysList(val) {
      // console.log(val)
      this.citys = citys(val)
    },
    // 搜索功能
    submitCheck() {
      this.page = 1
      this.getList()
    },
    // 清除搜索内容
    clear() {
      this.q = {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 5
      }
    },
    // 题目预览
    handleQuestionPreview(row) {
      // console.log(row)
      this.isShowDialog = true
      this.rowQuestion = row
    },
    // 删除题目
    delQuestion(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await remove(row)
        // console.log(res)
        this.$message.success('删除成功')
        if (this.items.length === 1 && this.q.page > 1) {
          this.q.page--
        }
        this.getList()
      }).catch(() => {
        this.$message.info('已取消操作')
      })
    },
    // 审核试题
    clickCheck(row) {
      this.rowCheck = row
      this.showCheckDialog = true
    },
    // 提交审核
    async handleClickCheck() {
      await choiceCheck({
        id: this.rowCheck.id,
        chkState: this.radio,
        chkRemarks: this.chkRemarks
      })
      this.showCheckDialog = false
      this.getList()
      // console.log(res, 111)
    },
    // 上下架题目
    handleQuestionsState(row) {
      // console.log(row.id)
      const res = row.publishState !== 1 ? '上架' : '下架'
      this.$confirm(`是否${res}该题目?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        if (row.publishState === 1) {
          await choicePublish({
            id: row.id,
            publishState: 0
          })
          this.$message.success('下架成功')
        } else {
          await choicePublish({
            id: row.id,
            publishState: 1
          })
          this.$message.success('上架成功')
        }
        this.getList()
      }).catch(() => {
        this.$message.info('已取消操作')
      })
    },
    // tabs栏切换
    handleClick() {
      // console.log(tab, event)
      this.q.page = 1
      this.getList()
    }

  }
}
</script>

<style scoped lang="scss">
.container {
  .maright {
    margin-right: 15px;
  }

  ::v-deep .el-table__header-wrapper {
    background-color: #000;
    box-shadow: 5px 5px 5px;
  }
}
</style>
